<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>个人信息</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-3.3.7/css/bootstrap.min.css" />
		<script src="/static/manage/common/bootstrap/js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<form class="form-inline">
			<div class="form-group">
				<label for="exampleInputName2">礼包编号：</label>
				<input type="text" class="form-control" id="bag_id" name="bag_id" placeholder="请输入编号">
			</div>
			<div class="form-group">
				<label for="exampleInputEmail2">礼包名称：</label>
				<input type="text" class="form-control" id="bag_name" name="bag_name" placeholder="请输入名称">
			</div>
			<div class="form-group">
				<label for="exampleInputEmail2">状态：</label>
				<select class="form-control" id="status" name="status">
					<option value="0"></option>
					<option value="1">在售</option>
					<option value="2">下架</option>
				</select>
			</div>
			<button type="button" class="btn btn-primary" id="btns3"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查询</button>
			<button type="reset" class="btn btn-info"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>&nbsp;重置</button>
			<!-- Button trigger modal -->
			<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;新增</button>
		</form>

		<table id="table3">

		</table>

		<!-- 添加Modal -->
		<form class="form-inline" id="fm" name="myform" action="/bnb/addBag" method="post" enctype="multipart/form-data">
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document" style="width: 1000px;">
					<div class="modal-content">
						
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">礼包添加列表</h4>
						</div>
						
						<table class="table table-bordered">
							<tr>
								<td>
								<label for="exampleInputName2">礼包名称：</label>
								</td>
								<td>
								<input type="text" class="form-control" id="bag_name" name="bag_name" placeholder="请输入内容">
								</td>
								<td>
								<label for="exampleInputName2">礼包价格：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="bag_total_price" name="bag_total_price" placeholder="请输入内容">
								</td>
							</tr>
							<tr>
								<td>
									<label for="exampleInputName2">列表图片：</label>
								</td>
								<td>
									<input type="file" class="form-control" id="cover_photo" name="file">
								</td>
								<td>
									<label for="exampleInputName2">封面图片：</label>
								</td>
								<td>
									<input type="file" class="form-control" id="cover_big_photo" name="file">
								</td>
							</tr>
							<tr>
								<td>
								<label for="exampleInputName2">开卡数量：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="open_card_num" name="open_card_num" placeholder="请输入内容">&nbsp;张
								</td>
								<td>
								<label for="exampleInputName2">卡剩余量：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="remain_num" name="remain_num" placeholder="请输入内容">&nbsp;张
								</td>
							</tr>
							<tr>
								<td>
								<label for="exampleInputName2">上架时间：</label>
								</td>
								<td>
								<input type="date" class="form-control" id="putaway_time" name="putaway_time">
								</td>
								<td>
								<label for="exampleInputName2">下架时间：</label>
								</td>
								<td>
								<input type="date" class="form-control" id="soldout_time" name="soldout_time">
								</td>
							</tr>
							<tr>
								<td>
								<label for="exampleInputName2">过期时间：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="overdue_time" name="overdue_time" placeholder="请输入内容">
								</td>
								<td>
								<label for="exampleInputEmail2">状态：</label>
								</td>
								<td>
								<select class="form-control" id="status" name="status">
									<option value="1">在售</option>
									<option value="2">下架</option>
								</select>
								</td>
							</tr>
							<tr>
								<td>
								<label for="exampleInputName2">每次最少购买量：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="min_buy_num" name="min_buy_num" placeholder="请输入内容">
								</td>
								<td>
								<label for="exampleInputName2">每次最大购买量：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="max_buy_num" name="max_buy_num" placeholder="请输入内容">
								</td>
							</tr>
							<tr>
								<td>
								<label for="exampleInputName2">允许购买次数：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="buy_count" name="buy_count" value="1">
								</td>
								<td>
								<label for="exampleInputName2">排序号：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="sort_no" name="sort_no" value="1">
								</td>
								
							</tr>
						</table>
						
						<label for="exampleInputName2">礼包介绍：</label>
						<textarea class="form-control" rows="10" cols="140" id="bag_introduce" name="bag_introduce" placeholder="请输入内容"></textarea>
								
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal" onclick="restClose()">关闭</button>
							<button type="button" class="btn btn-primary" id="addbtn3">保存</button>
						</div>
						
					</div>
				</div>
			</div>
		</form>

		<!-- 修改Modal -->
		<form class="form-inline" id="fm2" name="myform2" action="/bnb/updateBag" method="post" enctype="multipart/form-data">
			<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document" style="width: 1000px;">
					<div class="modal-content">
						
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">礼包修改列表</h4>
						</div>
						
						<table class="table table-bordered">
							<tr>
								<td>
								<input type="hidden" class="form-control" id="bag_id1" name="bag_id" value="">
								<label for="exampleInputName2">礼包名称：</label>
								</td>
								<td>
								<input type="text" class="form-control" id="bag_name1" name="bag_name" value="">
								</td>
								<td>
								<label for="exampleInputName2">礼包价格：</label>
								</td>
								<td>
								<input type="text" class="form-control" id="bag_total_price1" name="bag_total_price" value="">
								</td>
							</tr>
							<tr>
								<td>
									<label for="exampleInputName2">列表图片：</label>
									</td>
									<td>
									<span class="h-cont h-right"><img src="" id="cover_photo3" width="100" height="100"/></span>
									<input type="file" class="form-control" id="cover_photo1" name="file">
								</td>
								<td>
									<label for="exampleInputName2">封面图片：</label>
									</td>
									<td>
									<span class="h-cont h-left"><img src="" id="cover_big_photo3" width="100" height="100" /></span>
									<input type="file" class="form-control" id="cover_big_photo1" name="file">
									</td>
							</tr>
							<tr>
								<td>
								<label for="exampleInputName2">开卡数量：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="open_card_num1" name="open_card_num" value="">
								</td>
								<td>
								<label for="exampleInputName2">卡剩余量：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="remain_num1" name="remain_num" value="">
								</td>
							</tr>
							<tr>
								<td>
								<label for="exampleInputName2">上架时间：</label>
								</td>
								<td>
								<input type="date" class="form-control" id="putaway_time1" name="putaway_time" value="">
								</td>
								<td>
								<label for="exampleInputName2">下架时间：</label>
								</td>
								<td>
								<input type="date" class="form-control" id="soldout_time1" name="soldout_time" value="">
								</td>
							</tr>
							<tr>
								<td>
								<label for="exampleInputName2">过期时间：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="overdue_time1" name="overdue_time" value="">
								</td>
								<td>
								<label for="exampleInputEmail2">状态：</label>
								</td>
								<td>
								<select class="form-control" id="status1" name="status" value="">
									<option value="1">在售</option>
									<option value="2">下架</option>
								</select>
								</td>
							</tr>
							<tr>
								<td>
								<label for="exampleInputName2">每次最少购买量：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="min_buy_num1" name="min_buy_num" value="">
								</td>
								<td>
								<label for="exampleInputName2">每次最大购买量：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="max_buy_num1" name="max_buy_num" value="">
								</td>
							</tr>
							<tr>
								<td>
								<label for="exampleInputName2">允许购买次数：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="buy_count1" name="buy_count" value="">
								</td>
								<td>
								<label for="exampleInputName2">排序号：</label>
								</td>
								<td>
								<input type="number" class="form-control" id="sort_no1" name="sort_no" value="">
								</td>
							</tr>
						</table>
						
						<label for="exampleInputName2">礼包介绍：</label>
						<textarea class="form-control" rows="8" cols="140" id="bag_introduce1" name="bag_introduce" value=""></textarea>
								
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" id="updatebtn3">保存</button>
						</div>
						
					</div>
				</div>
			</div>
		</form>
		
		<!-- 查看详情Modal -->
			<form class="form-inline" id="fm3">
				<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document" style="width: 1000px;">
						<div class="modal-content">
							
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="myModalLabel" align="center">礼包详细信息</h4>
							</div>
									
							<table class="table table-bordered">
								<tr>
									<td>
										<span class="h-cont h-right">礼包编号：</span>
									</td>
									<td>	
										<span class="h-cont h-left" id="bag_id2"></span>
									</td>
									<td>
										<span class="h-cont h-right">礼包名称：</span>
									</td>
									<td>	
										<span class="h-cont h-right" id="bag_name2"></span>
									</td>
								</tr>
								<tr>
									<td>
										<span class="h-cont h-right">列表图片：</span>
									</td>
									<td>	
										<span class="h-cont h-right"><img src="" id="cover_photo2" width="100" height="100"/></span>
									</td>
									<td>
										<span class="h-cont h-right">封面图片：</span>
									</td>
									<td>	
										<span class="h-cont h-left"><img src="" id="cover_big_photo2" width="100" height="100" /></span>
									</td>
								</tr>
								<tr>
									<td>
										<span class="h-cont h-right">礼包价格：</span>
									</td>
									<td>	
										<span class="h-cont h-right" id="bag_total_price2"></span>
									</td>
									<td>
										<span class="h-cont h-right">开卡数量：</span>
									</td>
									<td>	
										<span class="h-cont h-right" id="open_card_num2"></span>&nbsp;张
									</td>
								</tr>
								<tr>
									<td>
										<span class="h-cont h-right">卡剩余量：</span>
									</td>
									<td>	
										<span class="h-cont h-left" id="remain_num2"></span>&nbsp;张
									</td>
									<td>
										<span class="h-cont h-right">上架时间：</span>
									</td>
									<td>	
										<span class="h-cont h-left" id="putaway_time2"></span>
									</td>
								</tr>
								<tr>
									<td>
										<span class="h-cont h-right">下架时间：</span>
									</td>
									<td>	
										<span class="h-cont h-left" id="soldout_time2"></span>
									</td>
									<td>
										<span class="h-cont h-right">过期时间：</span>
									</td>
									<td>	
										<span class="h-cont h-left" id="overdue_time2"></span>
									</td>
								</tr>
								<tr>
									<td>
										<span class="h-cont h-right">状态 ：</span>
									</td>
									<td>	
										<span class="h-cont h-left" id="status2"></span>
									</td>
									<td>
										<span class="h-cont h-right">排序号：</span>
									</td>
									<td>	
										<span class="h-cont h-left" id="sort_no2"></span>
									</td>
								</tr>
								<tr>
									<td>
										<span class="h-cont h-right">每次最少购买量 ：</span>
									</td>
									<td>	
										<span class="h-cont h-left" id="min_buy_num2"></span>
									</td>
									<td>
										<span class="h-cont h-right">每次最大购买量 ：</span>
									</td>
									<td>	
										<span class="h-cont h-left" id="max_buy_num2"></span>
									</td>
								</tr>
								<tr>
									<td>
										<span class="h-cont h-right">允许购买次数 ：</span>
									</td>
									<td>	
										<span class="h-cont h-left" id="buy_count2"></span>
									</td>
								</tr>
								</table>
								
								<span class="h-cont h-right">礼包介绍：</span>
								<textarea class="form-control" rows="8" cols="140" id="bag_introduce2" name="bag_introduce" value=""></textarea>
									
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								</div>
								
							</div>
						</div>
					</div>
			</form>
	</body>
	<script type="text/javascript">
		$(function() {

			//1.初始化Table

			var oTable = new TableInit();

			oTable.Init();
		});

		var TableInit = function() {
			var oTableInit = new Object();
			//初始化Table
			oTableInit.Init = function() {

				$('#table3').bootstrapTable({

					method: 'get',

					contentType: "application/x-www-form-urlencoded",

					url: "/bnb/bag", //请求后台的URL（*）

					striped: true, //是否显示行间隔色

					locale: 'zh-CN', //中文支持

					pagination: true, //是否开启分页（*）

					pageNumber: 1, //初始化加载第一页，默认第一页

					pageSize: 5, //每页的记录行数（*）

					pageList: [3, 5, 7], //可供选择的每页的行数（*）

					sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

					showRefresh: true, //刷新按钮

					queryParams: oTableInit.queryParams, //传递参数（*）

					showColumns: true, //是否显示所有的列

					showRefresh: true, //是否显示刷新按钮

					clickToSelect: true, //是否启用点击选中行

					uniqueId: "bag_id", //每一行的唯一标识，一般为主键列

					columns: [{
						field: 'bag_id',
						title: '礼包编号',
						align: 'center',
					},{
						field: 'cover_photo',
						title: '列表图片',
						align: 'center',
						formatter: function(value, row, index) {
							return "<img src='"+value+"' width='80px' height='60px'>"
						}
					}, {
						field: 'bag_name',
						title: '礼包名称',
						align: 'center',
					}, {
						field: 'bag_total_price',
						title: '礼包价格',
						align: 'center',
					}, {
						field: 'open_card_num',
						title: '开卡数量',
						align: 'center',
					}, {
						field: 'remain_num',
						title: '剩余卡数量',
						align: 'center',
					}, {
						field: 'putaway_time',
						title: '上架时间',
						align: 'center',
						//获取日期列的值进行转换
						formatter: function(value, row, index) {
							return changeDateFormat(value)
						}
					}, {
						field: 'soldout_time',
						title: '下架时间',
						align: 'center',
						//获取日期列的值进行转换
						formatter: function(value, row, index) {
							return changeDateFormat(value)
						}
					}, {
						field: 'overdue_time',
						title: '过期时间',
						align: 'center',
					}, {
						field: 'status',
						title: '状态',
						align: 'center',
						formatter: function(value, row, index) {
							switch(Number(value)) {
								case 1:
									return "在售";
									break;
								case 2:
									return "下架";
									break;
							}
						}
					}, {
						field: 'create_time',
						title: '创建时间',
						align: 'center',
						//获取日期列的值进行转换
						formatter: function(value, row, index) {
							return changeDateFormat(value)
						}
					}, {
						field: 'sort_no',
						title: '排序号',
						align: 'center',
					}, {
						field: 'cz',
						title: '操作',
						width: '200px',
						align: 'center',
						formatter: function(value, row, index) {
							return '<button class="btn btn-warning" data-toggle="modal" data-target="#myModal2" onclick="findByBagId(' + row.bag_id + ')">修改<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>' + '&nbsp&nbsp' + '<button onclick="deleteBag(' + row.bag_id + ')" class="btn btn-danger">删除<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>' + '<button data-toggle="modal" data-target="#myModal3" onclick="findByBagId2(' + row.bag_id + ')" class="btn btn-info"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查看详情</button>'
						}

					}]

				});

			};
			//得到查询的参数

			oTableInit.queryParams = function(params) {

				var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

					offset: params.offset, //偏移量

					//每页多少条数据
					pageSize: params.limit,

					bag_id: $("#bag_id").val(),

					bag_name: $("#bag_name").val(),

					status: $("#status").val()
				};
				return temp;
			};
			return oTableInit;
		};

		//转换日期格式(时间戳转换为datetime格式)
		function changeDateFormat(cellval) {
			var dateVal = cellval + "";
			if(cellval != null) {
				var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

				return date.getFullYear() + "-" + month + "-" + currentDate;
			}
		}

		//查询
		$('#btns3').click(function() {
			$('#table3').bootstrapTable('refresh');
		})

		//删除
		function deleteBag(bag_id) {
			$.ajax({
				type: "post",
				url: "/bnb/deleteBag/" + bag_id,
				success: function(data) {
					$("#table3").bootstrapTable('refresh');
				}
			});
		}

		//添加
		$("#addbtn3").click(function() {
			$("#fm").submit() //提交
			$("#myModal").modal("hide")
			$("#table3").bootstrapTable('refresh');
		})

		//根据ID查询
		function findByBagId(bag_id) {
			$.ajax({
				type: "post",
				url: "/bnb/findByBagId/" + bag_id,
				success: function(data) {
					$("#bag_id1").val(bag_id);
					$("#bag_name1").val(data.rows.bag_name);
					$("#bag_total_price1").val(data.rows.bag_total_price);
					$("#cover_photo3").attr("src",data.rows.cover_photo)
					$("#cover_big_photo3").attr("src",data.rows.cover_big_photo)
					$("#open_card_num1").val(data.rows.open_card_num);
					$("#remain_num1").val(data.rows.remain_num);
					$("#putaway_time1").val(changeDateFormat(data.rows.putaway_time));
					$("#soldout_time1").val(changeDateFormat(data.rows.soldout_time));
					$("#overdue_time1").val(data.rows.overdue_time);
					$("#status1").val(data.rows.status);
					$("#min_buy_num1").val(data.rows.min_buy_num);
					$("#max_buy_num1").val(data.rows.max_buy_num);
					$("#sort_no1").val(data.rows.sort_no);
					$("#buy_count1").val(data.rows.buy_count);
					$("#bag_introduce1").val(data.rows.bag_introduce);
				}
			});
		}
		
		//根据ID查看详情
		function findByBagId2(bag_id) {
			$.ajax({
				type: "post",
				url: "/bnb/findByBagId/" + bag_id,
				success: function(data) {
					$("#bag_id2").html(data.rows.bag_id);
					$("#bag_name2").html(data.rows.bag_name);
					$("#bag_total_price2").html(data.rows.bag_total_price);
					$("#cover_photo2").attr("src",data.rows.cover_photo)
					$("#cover_big_photo2").attr("src",data.rows.cover_big_photo)
					$("#open_card_num2").html(data.rows.open_card_num);
					$("#remain_num2").html(data.rows.remain_num);
					$("#putaway_time2").html(changeDateFormat(data.rows.putaway_time));
					$("#soldout_time2").html(changeDateFormat(data.rows.soldout_time));
					$("#overdue_time2").html(data.rows.overdue_time);
					$("#status2").html(data.rows.status);
					if(data.rows.status==1){
						$("#status2").html("在售");
					}else if(data.rows.status==2){
						$("#status2").html("下架");
					}
					$("#min_buy_num2").html(data.rows.min_buy_num);
					$("#max_buy_num2").html(data.rows.max_buy_num);
					$("#buy_count2").html(data.rows.buy_count);
					$("#sort_no2").html(data.rows.sort_no);
					$("#bag_introduce2").html(data.rows.bag_introduce);
				}
			});
		}

		//修改
		$("#updatebtn3").click(function() {
			$("#fm2").submit() //提交
			$("#myModal2").modal("hide")
			$("#table3").bootstrapTable('refresh');
		})
		
		//关闭后清空信息
		function restClose(){
			document.getElementById("fm").reset();
		}
	</script>

</html>